<template>
  <el-dialog
    :title="setTitle"
    width="60%"
    class="el-dialog-box"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    @close="handleDialogClose"
  >
    <div class="edit-label-content">
      <el-form ref="form" :model="infoForm" :rules="rules" label-width="120px">
        <el-form-item label="姓名:" prop="name">
          <el-input class="form-width" size="medium" v-model.trim="infoForm.name"></el-input>
        </el-form-item>
        <el-form-item label="性别:" prop="sex">
          <el-radio-group v-model="infoForm.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="身份证号:" prop="idCard">
          <el-input class="form-width" size="medium" maxlength="18" v-model="infoForm.idCard"></el-input>
        </el-form-item>
        <el-form-item label="手机号:" prop="phone">
          <el-input
            class="form-width"
            :disabled="!!id"
            size="medium"
            maxlength="11"
            @input="handlePhone"
            v-model="infoForm.phone"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="usePassword" v-if="!id">
          <el-input
            class="form-width"
            size="medium"
            maxlength="6"
            @input="handlePassword"
            v-model="infoForm.usePassword"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注:" prop="remark">
          <el-input
            class="form-width remarks"
            type="textarea"
            v-model="infoForm.remark"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <!-- 按键 -->
    <span slot="footer" class="dialog-footer">
      <div class="default-btn" @click="dialogVisible = false">
        {{ $t("user.calcel") }}
      </div>
      <div class="default-btn primary-btn" @click="save">
        {{ $t("user.preservation") }}
      </div>
    </span>
  </el-dialog>
</template>

<script>
import { encrypt } from "@/utils/crypto";
export default {
  data() {
    return {
      id: "",
      action: "add",
      dialogVisible: false,
      infoForm: {},
      rules: {
        name: [{ required: true, message: "请输入姓名", min: 2, trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        idCard: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          {
            pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9X]$/,
            message: "请输入正确的身份证号",
            trigger: "blur",
          },
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1\d{10}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        usePassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6,max:6, message: "密码长度只能是6位", trigger: "blur" },
        ],
        remark: [],
      },
    };
  },
  computed: {
    setTitle() {
      return !!this.id ? "编辑" : "新增";
    },
  },
  mounted() {},
  methods: {
    handlePassword(){
        this.infoForm.usePassword = this.infoForm.usePassword.replace(/[\u4e00-\u9fa5\s]/g, '');
    },
    handlePhone(){
        this.infoForm.phone = this.infoForm.phone.replace(/[^0-9]/g, '');
    },
    open(id, payload) {
      this.handleDialogClose();
      this.id = id;
      this.dialogVisible = true;
      this.id && this.getInfo();
    },
    getInfo() {
      this.$http({
        url: this.$http.adornUrl("/platform/rider/" + this.id),
        method: "get",
      }).then(({ data }) => {
        this.infoForm = data;
      });
    },
    save() {
      // 校验表单
      this.$refs.form.validate((valid) => {
        if (valid) {
          let method = this.id ? "put" : "post";
          this.infoForm.password = encrypt(this.infoForm.usePassword);
          this.$http({
            url: this.$http.adornUrl("/platform/rider"),
            method,
            data: this.$http.adornData(this.infoForm),
          }).then(({ code }) => {
            if (code == "00000") {
              this.dialogVisible = false;
              this.$message({
                message: this.id ? "编辑成功" : "新增成功",
                type: "success",
              });
              this.$emit("refresh");
            }
          });
        }
      });
    },
    handleDialogClose() {
      // 重置表单
      this.$nextTick(() => {
        this.$refs.form.resetFields();
        this.infoForm = {};
        this.$forceUpdate();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@media (max-width: 1880px) {
  .el-dialog-box .el-dialog {
    width: 60%;
  }
}
@media (max-width: 1650px) {
  .el-dialog-box .el-dialog {
    width: 70%;
  }
}
@media (max-width: 1380px) {
  .el-dialog-box .el-dialog {
    width: 80%;
  }
}
.form-width {
  width: 300px;
}
.remarks {
  height: 100px;
}
.remarks ::v-deep textarea {
  height: 100px;
  resize: none;
}
</style>
